<template>
  <div id="amap-demo"></div>
</template>
<script>
var echarts = require("echarts");

export default {
  name: "mapBox",
  data() {
    return {};
  },
  mounted: function () {
    this.$nextTick(() => {
      this.draw();
    });
  },
  methods: {
    draw() {
      var drawCharts = document.getElementById("amap-demo"); // 对应地使用ByClassName
      var drawChart = echarts.init(drawCharts);
      var MapOutline = {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            properties: {
              name: "古交市",
              id: "140181",
            },
            geometry: {
              type: "MultiPolygon",
              coordinates: [
                [
                  [
                    [112.095592070313, 38.1639479804688],
                    [112.125889921875, 38.1456728339844],
                    [112.152486601563, 38.1496034980469],
                    [112.20170046875, 38.1381996894532],
                    [112.207345, 38.1338430000001],
                    [112.200833769531, 38.1183388496094],
                    [112.234818144531, 38.0948744941407],
                    [112.229705839844, 38.0720729804687],
                    [112.251429472656, 38.0579274726563],
                    [112.277435332031, 38.0481972480469],
                    [112.291429472656, 38.0279274726563],
                    [112.303260527344, 38.0197585273438],
                    [112.327345, 37.9838430000001],
                    [112.32156375, 37.9691347480469],
                    [112.324022246094, 37.9524941230469],
                    [112.304136992188, 37.9267299628906],
                    [112.275338164063, 37.9441017890625],
                    [112.269427519531, 37.9041005683594],
                    [112.28170046875, 37.8881996894532],
                    [112.293822050781, 37.8788430000001],
                    [112.27298953125, 37.8627614570313],
                    [112.31170046875, 37.8281996894532],
                    [112.333187285156, 37.8194057441406],
                    [112.327345, 37.783843],
                    [112.267081328125, 37.738481671875],
                    [112.24298953125, 37.6981996894531],
                    [112.203878203125, 37.6873085761719],
                    [112.167345, 37.663843],
                    [112.156715117188, 37.6781325507813],
                    [112.113778105469, 37.6951955390626],
                    [112.097235136719, 37.7174318671875],
                    [112.04205203125, 37.7079311347657],
                    [112.003643828125, 37.7233705878906],
                    [111.964107695313, 37.7165639472656],
                    [111.932821074219, 37.7359267402344],
                    [111.903079863281, 37.7895778632812],
                    [111.811610136719, 37.7981081367188],
                    [111.796715117188, 37.8181325507813],
                    [111.760701933594, 37.8324428535156],
                    [111.733079863281, 37.8695778632813],
                    [111.727345, 37.8738430000001],
                    [111.752523222656, 37.9010158515625],
                    [111.812345, 37.8986452460938],
                    [111.822345, 37.8990407539063],
                    [111.938624296875, 37.8944325996094],
                    [111.952154570313, 37.9090334296876],
                    [111.978997832031, 37.9217018867188],
                    [112.051685820313, 37.9447158027344],
                    [112.006156035156, 37.9662026191406],
                    [112.037398710938, 37.9809474921875],
                    [112.011402617188, 38.0300722480469],
                    [112.013656035156, 38.0869167304687],
                    [111.99709109375, 38.1182192207032],
                    [112.037345, 38.1738430000001],
                    [112.095592070313, 38.1639479804688],
                  ],
                ],
              ],
            },
          },
        ],
      };
      var points = [
        {
          name: "古交市矾石沟煤焦有限公司",
          value: [112.176178, 37.919127],
        },
        {
          name: "山西古交煤焦集团白家沟煤业有限公司",
          value: [112.118151, 37.973507],
        },
        {
          name: "山西古交煤焦集团金之中煤业有限公司",
          value: [112.09937, 37.932752],
        },
        {
          name: "山西煤炭运销集团古交辽源煤业有限公司",
          value: [112.169457, 37.906643],
        },
        {
          name: "古交市千峰精煤有限公司",
          value: [112.250302, 37.884805],
        },
      ];
      let colors = ["#FF8C00", "#00acea", "#1DE9B6"];
      echarts.registerMap("MapOutline", MapOutline);
      let fontsize = this.getRealPX(15)
      var option = {
        backgroundColor: "#0e215b",
        color: ["#FF8C00", "#00acea", "#1DE9B6"],
        tooltip: {
          trigger: "item",
          formatter: "{b}",
        },
        // legend: {
        //     orient: 'vertical',
        //     x: 'left',
        //     data: ['古交市矾石沟煤焦有限公司', '山西古交煤焦集团白家沟煤业有限公司','山西古交煤焦集团金之中煤业有限公司'],
        //     textStyle: {
        //         color: '#fff'
        //     }
        // },
        // visualMap: {
        //     type: 'continuous',
        //     seriesIndex: [2, 3],
        //     min: 0,
        //     max: 100,
        //     calculable: true,
        //     color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],
        //     textStyle: {
        //         color: '#fff'
        //     }
        // },
        geo: {
          map: "MapOutline",
          show: false,
        },
        series: [
          {
            type: "map",
            map: "MapOutline",
            aspectScale: 0.75,
            itemStyle: {
              borderColor: "#4ea8f8",
              borderWidth: 0.6,
              areaColor: "rgba(0,0,0,0.5)",
            },
            label: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: fontsize,
              },
              emphasis: {
                textStyle: {
                  color: "#fff",
                },
              },
            },
            emphasis: {
              label: {
                show: false,
              },
              itemStyle: {
                areaColor: "rgba(0,0,0,0.5)",
              },
            },
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            showEffectOn: "render",
            rippleEffect: {
              period: 5,
              scale: 5,
              brushType: "fill",
            },
            hoverAnimation: true,
            label: {
              formatter: "{b}",
              position: "right",
              offset: [15, 0],
              color: (param) => colors[param.dataIndex % colors.length],
              show: true,
               fontSize: fontsize,
            },
            itemStyle: {
              color: (param) => {
                return colors[param.dataIndex % colors.length];
              },
              shadowBlur: 10,
              shadowColor: "#333",
              opacity: 0.75,
              
               
            },
            emphasis: {
              itemStyle: {
                opacity: 1, //线条宽度
              },
            },
            data: points,
          },
          {
            name: "古交市矾石沟煤焦有限公司",
            type: "lines",
            zlevel: 2,
            symbol: ["none", "arrow"],
            symbolSize: 7,
            effect: {
              show: true,
              period: 4,
              trailLength: 0.02,
              symbol: "circle",
              symbolSize: 4,
              color: "#fff",
            },
            lineStyle: {
              width: 0.5, //线条宽度
              opacity: 0.5, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
              shadowBlur: 10,
            },
            emphasis: {
              lineStyle: {
                width: 2, //线条宽度
              },
            },
            data: [
              {
                name:
                  "古交市矾石沟煤焦有限公司->山西古交煤焦集团白家沟煤业有限公司",
                value: 40,
                coords: [
                  [112.176178, 37.919127],
                  [112.118151, 37.973507],
                ],
              },
            ],
          },
          {
            name: "山西古交煤焦集团白家沟煤业有限公司",
            type: "lines",
            zlevel: 2,
            symbol: ["none", "arrow"],
            symbolSize: 7,
            effect: {
              show: true,
              period: 4,
              trailLength: 0.02,
              symbol: "circle",
              symbolSize: 4,
              color: "#fff",
            },
            lineStyle: {
              width: 0.5, //线条宽度
              opacity: 0.5, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
              shadowBlur: 10,
            },
            emphasis: {
              lineStyle: {
                width: 2, //线条宽度
              },
            },
            data: [
              {
                name:
                  "山西古交煤焦集团白家沟煤业有限公司->山西古交煤焦集团金之中煤业有限公司",
                value: 40,
                coords: [
                  [112.118151, 37.973507],
                  [112.09937, 37.932752],
                ],
              },
            ],
          },
        ],
      };
      drawChart.setOption(option);
    },
  },
};
</script>
<style lang="stylus" scoped>
#amap-demo {
  width: 607px;
  height: 604px;
}
</style>